<script setup>
import { ref ,onMounted} from 'vue'
import { nurseplanPage,addApi,deleteApi,queryByIdApi,updateApi } from '@/api/nurseplan'
import { ElMessage ,ElMessageBox } from 'element-plus'


// 定义分页数据
// 当前页是1
const currentPage = ref(1)
// 每页显示10条数据
const pageSize = ref(10)
const total = ref(0)
// 设置组件的尺寸规格
const size = 'default'
// 是否禁用
const disabled = false

// 清空

const handleReset = () => {

    queryForm.value = {
         id: '',
    sortNo: '',
    name: '',
    status: '',
    remark: '' 
    }
   
}




const queryForm = ref({ 
  
    id: '',
    sortNo: '',
    name: '',
    status: '',
    remark: '' 
    
})
const userList = ref([])


const queryUsers = async() => {
    let result = await nurseplanPage(currentPage.value,pageSize.value,queryForm.value.sortNo,queryForm.value.name)
    
    userList.value = result.data.rows
    // 分页数据完善(接口看的)
    total.value = result.data.total
}

// 分页处理
// 参数 val：表示用户切换到的 “当前页码”（例如 2、3 等）。
// 分页每页大小发生改变
const handleSizeChange = (val) => {
    // 从第一页开始
    currentPage.value = 1
    //  (前往第几页的框)每页显示val条数据
    pageSize.value = val
    //   搜索
    queryUsers()



}
// (用户直接点击第几页)当前页发生变化
const handleCurrentChange = (val) => {
    currentPage.value = val
    queryUsers()
}


// ----对话框

const ruleForm = ref({
    sortNo: '',
    name: '',
    status: '',
    remark: ''
})

// 弹框定义
const tips = ref('新增')
// 弹框默认显示
const dialogshow = ref(false)
// // 弹框显示(修改默认值要加上value)
const showDialog = () => {
  dialogshow.value = true
}

// 保存方法
// 1.1关联表单对象
const ruleFormRef = ref(null)

// 1.2保存操作
const save = async() => { 
  // 1.3校验表单参数
  //等同于 if (ruleFormRef === null || ruleFormRef === undefined) {
//   return; // 终止当前函数执行
// }
  if(!ruleFormRef)return
  // 表单数据校验 
  await ruleFormRef.value.validate(async (valid, fields) => {
    if (valid) {

      let result = null

      if(ruleForm.value.id){ 
        result = await updateApi(ruleForm.value)
      }else{ 
        result = await addApi(ruleForm.value)
      }

     
      if (result.code) {
        ElMessage({
          message: '操作成功',
          type: 'success',
          plain: true,
        })
      } else {
        ElMessage({
          message: '操作失败',
          type: 'success',
          plain: true,
        })
      }
      queryUsers()
      dialogshow.value = false

    }


  })
}
// 删除
  const delById = async(id) => { 
  ElMessageBox.confirm(
    '确认删除该部门吗?',
    'Warning',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(async() => {
      
       const result = await deleteApi(id);
      if(result.code){  
        ElMessage.success('删除成功')
          queryUsers()
      }else{
        ElMessage.error('删除失败')
      }
    })
    // 取消
    .catch(() => {
      ElMessage('已经取消了删除')
    })
}

// 编辑
const edit = async(id) => { 
   tips.value = ref('修改部门')
  const result = await queryByIdApi(id);
  // result.code如果响应的数据是正确的
  if(result.code){  
    dialogshow.value = true;
    ruleForm.value = result.data;
  }
}







onMounted(() => {
    queryUsers()
})




</script>







<template>


<!-- 对话框 -->


  <!-- 编辑弹框 -->
  <el-dialog v-model="dialogshow" v-bind:title="tips" width="500" :before-close="handleClose">



    <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" label-width="auto">
      <el-form-item label="排序号" prop="sortNo">
        <el-input v-model="ruleForm.sortNo" />
      </el-form-item>
    </el-form>

    
    <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" label-width="auto">
      <el-form-item label="名称" prop="name">
        <el-input v-model="ruleForm.name" />
      </el-form-item>
    </el-form>

    <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" label-width="auto">
      <el-form-item label="备注" prop="remark">
        <el-input v-model="ruleForm.remark" />
      </el-form-item>
    </el-form>

     <el-form-item label="状态" prop="status">
            <el-select v-model="ruleForm.status" placeholder="请选择状态">
                <el-option label="启用" value="1"></el-option>
                <el-option label="禁用" value="0"></el-option>
            </el-select>
        </el-form-item>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
        <el-button type="primary" @click="save ()">
          提交
        </el-button>
      </div>
    </template>
  </el-dialog>


<!-- 表单 -->
 <el-form :model="queryForm" :inline="true"  label-width="68px">
      <el-form-item label="排序号" prop="sortNo">
        <el-input
          v-model="queryForm.sortNo"
          placeholder="请输入排序号"
          
        />
      </el-form-item>
      <el-form-item label="名称" prop="name">
        <el-input
          v-model="queryForm.name"
          placeholder="请输入名称"
         
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="queryUsers">搜索</el-button>
        <el-button icon="Refresh" @click="handleReset">重置</el-button>
      </el-form-item>
       <!-- 新增操作按钮行 -->
    <el-form-item>
      
      <el-button type="success" icon="Plus" @click="showDialog">新增</el-button>
      
    </el-form-item>
    </el-form>


    <!-- 表格 -->
   <el-table :data="userList" style="width: 100%">
    <el-table-column prop="id" label="ID" width="auto" />
    <el-table-column prop="sortNo" label="排序号" width="auto" />
    <el-table-column prop="name" label="名称" width="auto" />
        <el-table-column prop="status" label="状态" >
    <template #default="scope">
        {{ scope.row.status === 1 ? '启用' : '禁用' }}
    </template>
    </el-table-column>
    <el-table-column prop="remark" label="备注"/>
    <el-table-column label="操作">
        <template #default="scope">
          <el-button type="primary" size="mini" @click="edit(scope.row.id)">编辑</el-button>
          <el-button type="primary" size="mini" @click="delById(scope.row.id)">删除</el-button>

        </template>
    </el-table-column>

  </el-table>


     <!-- 分页展示 -->
     <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[5, 10, 15, 20]"
            :size="size" :disabled="disabled" :background="background" layout="total, sizes, prev, pager, next, jumper"
            :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />



</template>

<style scoped>

</style>
 